
import React, { useState, useEffect } from 'react'
import { Image, Progress } from 'antd';
import Line from './line';
import TableS from './table';
import { ajax } from './../../../api/index';
import { useRootStore } from './../../../index';



const Index = () => {
    const Store = useRootStore()
    Store.changedata()
    const data1 = [
        {
            color1: "#1c01ff",
            color2: "#e3e5f5",
            percent: 80,
            title: "今日交易量",
            dataS: "400单"
        },
        {
            color1: "#05988a",
            color2: "#e1ecef",
            percent: 75,
            title: "今日总金额",
            dataS: "￥40298"
        },
        {
            color1: "#f38f90",
            color2: "#eed7db",
            percent: 80,
            title: "今日待发货",
            dataS: "130单"
        },
        {
            color1: "#327efe",
            color2: "#cbdcf6",
            percent: 89,
            title: "今日新增会员",
            dataS: "389人"
        }
    ]

    return (
        <div className='indexS' style={{ overflow: "hidden" }}>
            <div className='index-head'>
                <Image
                    // width={"340px"}
                    height={210}
                    src="error"
                    fallback="http://v.bootstrapmb.com/2020/8/kxifo8639/vendors/images/banner-img.png"
                />
                <div className='content'>
                    <p style={{ color: "#202342" }}>欢迎回来</p>
                    <p style={{ fontWeight: 600, color: "#000" }}>易涛</p>
                    <p style={{ maxWidth: 600 }}>每个人都可能会碰到特别难熬的阶段，或长或短，让你感到绝望，看不到光。可是，沉溺于抱怨、苦恼是没有用的，难过痛苦更加无济于事，倒不如收拾收拾心情，抖擞抖擞精神，昂首挺胸去面对，也许一切就会柳暗花明。</p>
                </div>
            </div>
            <div className='index-data'>
                {
                    data1 && data1.map((item, index) => {
                        return (
                            <div className='data1' key={index}>
                                <Progress
                                    strokeWidth={12}
                                    type="circle"
                                    strokeColor={{
                                        '0%': item.color1,
                                        '100%': item.color2,
                                    }}
                                    percent={item.percent || 0}
                                    width={70}
                                    status="active"
                                />
                                <div>
                                    <p>{item.title}</p>
                                    <p>{item.dataS}</p>
                                </div>
                            </div>
                        )
                    })
                }

            </div>
            <Line />
            <TableS  />
        </div>
    )
}

export default Index